<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件可以同时选择日期和时间的选择器
		</demo-desc>
		
		<fu-section :title="'日期：' + single" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="date" v-model="single" />
			</view>
		</fu-section>
		
		<fu-section :title="'日期时间：' + datetimesingleStr()" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="datetime" v-model="datetimesingle" />
			</view>
		</fu-section>
		
		<fu-section :title="'日期范围：' + range" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker v-model="range" type="daterange" />
			</view>
		</fu-section>
		
		<fu-section :title="'日期时间范围：' + range" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
			</view>
		</fu-section>
		
		<fu-section :title="'时间戳：' + $fu.formatTimestamp(single) * 1000" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker returnType="timestamp" v-model="single" />
			</view>
		</fu-section>
		
		<fu-section :title="'date 对象：' + datetimesingleObj() || ''" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="datetime" returnType="date" v-model="datetimesingle" />
			</view>
		</fu-section>
		
		<fu-section :title="'插槽：' + single" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="date" v-model="single">我是一个插槽，点击我</fu-date-picker>
			</view>
		</fu-section>
		
		<fu-section :title="'无边框：' + single" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="date" v-model="single" :border="false" />
			</view>
		</fu-section>
		
		<fu-section :title="'隐藏清除按钮：' + single" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="date" v-model="single" :clearIcon="false" />
			</view>
		</fu-section>
		
		<fu-section :title="'禁用 disabled：' + single" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-date-picker type="date" v-model="single" disabled />
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// data数据
	const { $fu } = getCurrentInstance().appContext.config.globalProperties;
	let single = ref('');
	let datetimesingle = ref('');
	let range = reactive([]);
	let datetimerange = reactive([]);
	let start = ref(Date.now() - 1000000000);
	let end = ref(Date.now() + 1000000000);
	
	// 生命周期
	onLoad(() => {
		datetimesingle.value = Date.now() - 2 * 24 * 3600 * 1000;
		single.value = $fu.formatTime(new Date().getTime() / 1000, 'Y-M-D');
		range.value = [$fu.formatTime(new Date().getTime() / 1000, 'Y-M-D'), $fu.formatTime((new Date().getTime() / 1000) + 2 * 24 * 3600, 'Y-M-D')]
		datetimerange.value = [$fu.formatTime(new Date().getTime() / 1000, 'Y-M-D h:m:s'), $fu.formatTime((new Date().getTime() / 1000) + 2 * 24 * 3600, 'Y-M-D h:m:s')]
	});
	
	// methods方法
	const datetimesingleStr = () => {
		return typeof(datetimesingle.value) === 'number'? $fu.formatTime(datetimesingle.value / 1000, 'Y-M-D'): datetimesingle.value
	};

	const datetimesingleObj = () => {
		return new Date(datetimesingle.value)
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>